<template>
  <ve-popup :value="modelValue" mode="bottom" @close="close">
    <view class="ve-picker-box">
      <view class="ve-picker-box-head">
        <view class="item-btn" @tap="cancel">取消</view>
        <!-- 关键字搜索 -->
        <view class="ve-picker-search" v-if="showFilter">
          <image
            :src="imgUrl + '/v240newui/search.png'"
            class="icon_search"
            mode="widthFix"
          ></image>
          <input
            type="text"
            placeholder="请输入"
            placeholder-style="color:#8491A8; font-size:28rpx;"
            confirm-type="搜索"
            v-model="filterKeyWord"
            :always-embed="true"
            :adjust-position="true"
            :cursor-spacing="cursorSpacing"
            @confirm="filterChange"
            @input="filterInput"
          />
        </view>
        <template v-else>
          <view class="title" v-if="title"> {{ title }}</view>
        </template>
        <view class="item-btn confirm-btn" @tap="handleConfirm">确定</view>
      </view>
      <view class="ve-picker-box-body" v-if="!forceUpdate">
        <picker-view
          class="ve-picker-view"
          indicator-style="height: 44px;"
          :value="valueArr"
          :immediate-change="true"
          @change="handleChange"
          v-if="Array.isArray(list) && list.length > 0"
        >
          <picker-view-column>
            <view class="column-item" v-for="(item, index) in list" :key="index">
              {{ props ? item[props.label] : item }}
            </view>
          </picker-view-column>
        </picker-view>
        <view v-else>
          <empty :marginTop="50" />
        </view>
      </view>
    </view>
  </ve-popup>
</template>

<script>
function debounce(fn, wait) {
  let timer = false
  return function () {
    clearTimeout(timer)
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      timer = false
      fn.apply(this, arguments) // 把参数传进去
    }, wait)
  }
}
import empty from '../empty/empty.vue'
export default {
  name: 've-picker',
  props: {
    modelValue: Boolean,
    initValue: Object | String | Number,
    showFilter: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => {
        return [1, '2021年12月08日', 3, 4, 5]
      },
    },
    props: {
      type: Object,
      default: () => {
        return {
          value: 'key',
          label: 'title',
        }
      },
    },
    title: String,
  },
  components: {
    empty,
  },
  watch: {
    initValue: {
      handler() {
        this.init()
      },
      immediate: true,
    },
    list() {
      this.init()
    },
  },
  data() {
    return {
      imgUrl: getApp().globalData.requestImgUrl,
      visible: this.value,
      valueArr: [0],
      confirmValue: [],
      filterKeyWord: '',
      isInitial: true, // 是否是第一次初始化
      forceUpdate: false, // 强制更新 dom
      cursorSpacing: 18,
    }
  },
  mounted() {
    // 区分ios 和 android 设置不同的 cursorSpacing
    let platform = uni.getSystemInfoSync().platform
    switch (platform) {
      case 'android':
        this.cursorSpacing = 18
        break
      case 'ios':
        this.cursorSpacing = 48
        break
      default:
        this.cursorSpacing = 0
        break
    }
  },
  methods: {
    filterInput: debounce(function (e) {
      this.filterChange(e)
      if (e.detail.value.length > 0) {
        uni.hideKeyboard()
      }
    }, 2000),
    filterChange(e) {
      this.$emit('filterChange', e.detail.value)
    },
    init() {
      if (Array.isArray(this.list) && this.list.length > 0) {
        let index = this.list.findIndex((item) => {
          if (this.props && this.props.value) {
            return item[this.props.value] == this.initValue
          }
          return item == this.initValue
        })
        index < 0 ? (index = 0) : ''
        this.valueArr[0] = index
        if (!this.isInitial) {
          // 滚动部分滚动到顶部
          this.forceUpdate = true
          this.$nextTick(() => {
            this.forceUpdate = false
            // 这一行必须写，否则 index 值不准确
            this.valueArr[0] = index
          })
        }
        this.isInitial = false
      }
    },
    handleConfirm() {
      this.confirmValue = this.valueArr
      let result = this.list[this.valueArr[0]]
      if (this.props && this.props.value) {
        result = result[this.props.value]
      }
      if (result || result == 0) {
        this.$emit('confirm', result, this.confirmValue)
        this.close()
      }
    },
    cancel() {
      this.valueArr = this.confirmValue
      this.close()
    },
    close() {
      this.$emit('update:modelValue', false)
    },
    handleChange(e) {
      this.valueArr = e.detail.value
    },
  },
}
</script>

<style lang="scss" scoped>
.ve-picker-box {
  // 安全底部距离
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  &-head {
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 2px solid #F1F2F5;
    color: #1f2334;
    font-size: 32rpx;
    line-height: 44rpx;

    .item-btn {
      padding: 28rpx;
    }

    .title {
      font-weight: 500;
    }

    .confirm-btn {
      font-weight: 500;
      color: #3072f6;
    }
  }

  &-body {
    height: 40vh;

    .column-item {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      padding: 0 8rpx;
    }
  }
}

.ve-picker-view {
  height: 100%;
  box-sizing: border-box;
}

.ve-picker-search {
  display: flex;
  align-items: center;
  width: 60%;
  border-radius: 16rpx;
  background: #fff;
  padding: 10rpx;
  font-size: 28rpx;
  color: #191c27;
  border: 2rpx solid #a2a3a9;

  .icon_search {
    margin-right: 16rpx;
    width: 40rpx;
    height: 40rpx;
  }
}
</style>
